<template>
  <q-page class="cc-admin column q-pa-sm">
    <div class="col column bg-white shadow-2 q-pa-md justify-center items-center">
      <div class="column music-main col-2 q-py-md ">
        <div class="text-h5 text-center">{{songInfo.name}}</div>
        <div class="col column justify-center items-center">
          <audio autoplay :src="songInfo.url" controls id="audio" />
        </div>

        <div class="q-gutter-sm row">
          <div class="col"></div>
          <q-btn padding="none" color="primary" icon="play_arrow" @click="play" />
          <q-btn padding="none" color="primary" icon="pause" @click="pause" />
          <q-btn padding="none" color="primary" icon="skip_previous" @click="prev" />
          <q-btn padding="none" color="primary" icon="skip_next" @click="next" />
          <div class="col"></div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      audio: null,
      playing: false,
      index: 0, // 当前播放歌曲在列表中的下标
      currentTime: '00:00', // 当前播放时间
      totalTime: '00:00', // 总播放时间
      bufferedScaleX: 0, // 缓存进度
      processWidth: 0, // 播放百分比
      progressScaleX: 0, // 播放进度
      thumbTranslateX: 0, // 进度条滑块位置
      silderBoxX: 0, // 进度条滑块位置-->采用element后的
      volume: 50, // 音量
      error: '', // 报错内容
      playType: '1', // 播放类型：1-列表循环，2-随机播放，3-单曲循环
      // 播放列表
      songList: [
        {
          albumId: 75612550,
          albumTitle: '辞.九门回忆',
          artistsName: '解忧草',
          cover: '',
          finalTime: '04:00',
          id: 1347524822,
          index: 6,
          mvId: 0,
          name: '辞.九门回忆',
          sort: '07',
          url: 'https://music.163.com/song/media/outer/url?id=1347524822.mp3',
        },
        {
          albumId: 35172219,
          albumTitle: '君の名は - 黄昏之时',
          artistsName: 'Frank_Jiang',
          cover:
            'https://p1.music.126.net/YppJiMHyrLc7tDkj6jUttg==/109951162858188597.jpg',
          finalTime: '03:00',
          id: 459116892,
          index: 5,
          mvId: 0,
          name: '黄昏之时（FRANKOWO Bootleg）',
          sort: '06',
          url: 'https://music.163.com/song/media/outer/url?id=459116892.mp3',
        },
      ],
      // 当前播放歌曲
      songInfo: {
        albumId: 75612550,
        albumTitle: '辞.九门回忆',
        artistsName: '解忧草/冰幽',
        cover: '',
        finalTime: '04:00',
        id: 1347524822,
        index: 6,
        mvId: 0,
        name: '辞.九门回忆',
        sort: '07',
        url: 'https://music.163.com/song/media/outer/url?id=1347524822.mp3',
      },
      lyricsObjArr: [], // 歌词
      lyricIndex: 0,
    };
  },
  created() {

  },
  mounted() {
    this.audio = document.getElementById('audio');
    this.audio.addEventListener(
      'ended',
      () => {
        this.next();
      },
      true,
    );
  },
  methods: {
    // 播放
    play() {
      this.audio.play();
    },

    // 暂停
    pause() {
      this.audio.pause();
    },
    prev() {

    },
    next() {
      switch (this.playType) {
        case '1': // 列表循环
          this.index = this.index + 1 >= this.songList.length ? 0 : this.index + 1;
          break;
        case '2': // 随机播放
          this.index = Math.floor(Math.random() * this.songList.length);
          break;
        default: // 单曲循环
          break;
      }
      this.songInfo = this.songList[this.index];
      this.thumbSlide = true;
      debugger;
      setTimeout(() => {
        this.play();
      }, 100);
      // 解决因为transition的回弹bug
      setTimeout(() => {
        this.thumbSlide = false;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="stylus">
.music-main
  width 600px
  height 500px
  background-image url('~assets/image/music.jpg')
  background-repeat no-repeat
  background-size 100% 100%
</style>
